<!--此处的商品列表逻辑,一个商家可能有两个商品列表,一个是在供货商系统的商品列表,一个此页面,此页面的商品=商品库商品(origin_product_id实现)+产品的供货商id是当前租户的+产品的销售方是当前租户的商品
 1.一期实现产品的销售方也就是product表的sellerTenantId为当前租户的商品
-->

<style type="text/css">
    .layui-form-mid {
        width: 300px;
    }

    .mid-block {
        width: 750px;
    }

    .layui-layer-content .layui-form-label {
        width: 120px;
    }

    tbody .layui-table-cell {
        height: 100px;
        white-space: normal;
        overflow: hidden;
        line-height: 100px;
    }

    h4 {
        font-weight: 600
    }

    .product-info {
        line-height: 23px;
    }
</style>
<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">商品列表</h2>
    </div>
    <div class="layui-card-body">
        <div class=" toolbar">
            <form id="search-form" class="layui-form" lay-filter="search-form">
                <input type="hidden" name="states" value="6"/>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">SPU ：</label>
                        <div class="layui-input-inline mr0">
                            <input name="spu" class="layui-input" type="text" placeholder="商品SPU"/>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label ">供货商：</label>
                        <div class="layui-input-inline mr0">
                            <input name="supplierName" class="layui-input" type="text" maxlength="20" placeholder="供货商名称"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label  ">商品名称 ：</label>
                        <div class="layui-input-inline mr0">
                            <input name="name" class="layui-input" type="text" placeholder="商品名称"/>
                        </div>
                    </div>
                    <div class="layui-inline form-search-show-expand">
                        <label class="layui-form-label  ">商品分类：</label>
                        <div class="layui-input-inline mr0">
                            <input id="categoryId" placeholder="请选择" class="layui-hide"/>
                            <input id="cateid" name="productCateId" type="hidden">
                        </div>
                    </div>
                    <div class="layui-inline pl20">
                        <button class="layui-btn" type="button" lay-active="doQuery" lay-submit="">
                            查询
                        </button>
                        <a class="layui-btn layui-btn-primary form-search-expand" data-expand="true">
                        展开 <i class="layui-icon layui-icon-down"></i>
                        </a>
                    </div>
                </div>
            </form>
        </div>

        <table class="layui-table theme-table" id="tableElement" lay-filter="tableElement"></table>

    </div>
</div>
<script type="text/html" id="topBar">
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="info">新增商品库商品</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="info">商品详情</a>
</script>
<script type="text/html" id="operationBar">
</script>
<script type="text/html" id="switchStatus">
    <input type="checkbox" name="isTop" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="isTop" {{
           d.isTop=="2" ? 'checked' : '' }}>
</script>

<script type="text/html" id="info-temp">
    <div class="layui-form stock_price plr15">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">商品基本信息</li>
                <li>商品价格信息</li>
                <li>商品规格</li>
                <li>商品图片信息</li>
                <li>商品详情</li>
                {{# if(d.integralType==2){}}
                <li>积分商城信息</li>
                {{# }}}
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类名称：</label>
                        <div class="layui-form-mid">{{d.productCateName}}</div>
                        <!--<label class="layui-form-label">货源地：</label>-->
                        <!--<div class="layui-form-mid">{{d.productArea}}</div>-->
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品品牌：</label>
                        <div class="layui-form-mid">{{d.productBrandName||''}}</div>

                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">SPU：</label>
                        <div class="layui-form-mid">{{d.productCode||''}}</div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">商品名称：</label>
                        <div class="layui-form-mid mid-block">{{d.name1||''}}</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">副标题：</label>
                        <div class="layui-form-mid mid-block">{{d.name2||''}}</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">关键字：</label>
                        <div class="layui-form-mid mid-block">{{d.keyword||''}}</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品状态：</label>
                        <div class="layui-form-mid mid-block">
                            {{# if('1' == d.state){ }}
                            刚创建
                            {{# }else if('2'==d.state){ }}
                            提交审核
                            {{# }else if('3'==d.state){ }}
                            审核通过
                            {{# }else if('4'==d.state){ }}
                            申请驳回
                            {{# }else if('5'==d.state){ }}
                            产品删除
                            {{# }else if('6'==d.state){ }}
                            上架
                            {{# }else if('7'==d.state){ }}
                            下架
                            {{# } }}
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否推荐：</label>
                        <div class="layui-form-mid">{{d.isTop==1?'不推荐':'推荐'}}</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">积分商城商品：</label>
                        <div class="layui-form-mid">{{d.integralType==1?'否':'是'}}</div>
                    </div>
                    {{# if(d.integralType==2){}}
                    <div class="layui-form-item">
                        <label class="layui-form-label">积分商城分类：</label>
                        <div class="layui-form-mid">{{d.actIntegralResp?d.actIntegralResp.typeName:'未设置'}}</div>
                    </div>
                    {{# }}}
                    <div class="layui-form-item">
                        <label class="layui-form-label">包装清单：</label>
                        <div class="layui-form-mid">{{d.packing||''}}</div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">预计上架时间：</label>
                        <div class="layui-form-mid">{{d.upTime||''}}</div>
                    </div>

                </div>
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <label class="layui-form-label">成本价(元)：</label>
                        <div class="layui-form-mid">{{d.costPrice||'0'}}</div>

                    </div>
                    <div class="layui-form-item">

                        <label class="layui-form-label">保护价(元)：</label>
                        <div class="layui-form-mid">{{d.protectedPrice||'0'}}</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">市场价(元)：</label>
                        <div class="layui-form-mid">{{d.marketPrice||'0'}}</div>

                    </div>
                    <div class="layui-form-item">

                        <label class="layui-form-label">虚拟销量：</label>
                        <div class="layui-form-mid">{{d.virtualSales||'0'}}</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商城价(元):</label>
                        <div class="layui-form-mid">{{d.mallPcPrice||'0'}}</div>

                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商城价Mobile(元)：</label>
                        <div class="layui-form-mid">{{d.mallMobilePrice||'0'}}</div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <table class="layui-table theme-table">
                        <thead>
                        <tr>
                            <th>规格图片</th>
                            <th>规格值</th>
                            <th>SKU</th>
                            <th>商城PC价格(元)</th>
                            <th>商城MOBILE价格(元)</th>
                            <th>重量kg</th>
                            <th>长度cm</th>
                            <th>宽度cm</th>
                            <th>高度cm</th>
                            <th>库存</th>
                            {{#if (d.integralType==2){}}
                            <th>所需积分</th>
                            {{# }}}
                        </tr>
                        </thead>
                        <tbody>
                        {{# layui.each(d.goodsList, function(index, item){ }}
                        <tr>
                            <td><img src="{{item.images}}" style="width:80px;height:80px;" /></td>
                            <td>{{item.normName}}</td>
                            <td>{{item.sku}}</td>
                            <td>{{item.mallPcPrice}}</td>
                            <td>{{item.mallMobilePrice}}</td>
                            <td>{{item.weight}}</td>
                            <td>{{item.length}}</td>
                            <td>{{item.width}}</td>
                            <td>{{item.height}}</td>
                            <td>{{item.productStock}}</td>
                            {{#if (d.integralType==2){}}
                            <td>{{item.price||'未设置'}}</td>
                            {{# }}}
                        </tr>
                        {{# }); }}
                        </tbody>
                    </table>
                </div>
                <div class="layui-tab-item">
                    <div class=" el-form-item-content">
                        <ul class="el-upload-list el-upload-list--picture-card">
                            {{# layui.each(d.pic, function(index, item){ }}
                            <li class="el-upload-list-item ">
                                <img src="{{item.original}}" alt="{{item.title}}" class="el-upload-list-item-thumbnail"/>
                            </li>
                            {{# }); }}
                        </ul>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品描述:</label>
                        <div class="layui-input-block">
                            <pre>{{d.description}}</pre>
                        </div>

                    </div>
                </div>
                {{# if(d.integralType==2){}}
                <div class="layui-tab-item">

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">积分商城分类:</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" readonly
                                       value="{{d.actIntegralResp?d.actIntegralResp.typeName:'未设置'}}"/>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">兑换积分:</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" readonly
                                       value="{{d.actIntegralResp?d.actIntegralResp.price:''}}"/>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">


                        <div class="layui-inline">
                            <label class="layui-form-label">限购数量:</label>
                            <div class="layui-input-inline">
                                <input type="text" readonly class="layui-input"
                                       value="{{d.actIntegralResp?d.actIntegralResp.limitQuantity:''}}"/>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">排序:</label>
                            <div class="layui-input-inline">
                                <input type="text" readonly class="layui-input"
                                       value="{{d.actIntegralResp?d.actIntegralResp.sortNum:''}}"/>
                            </div>
                        </div>


                    </div>
                </div>
                {{# }}}

            </div>
        </div>
    </div>
</script>

<script>

    layui.use(['tools', 'form', 'table', 'util', 'setter', 'admin', 'laytpl', 'cascader'], function () {
        var laytpl = layui.laytpl;
        var form = layui.form;
        var tools = layui.tools;
        var table = layui.table;
        var layer = layui.layer;
        var admin = layui.admin;
        var cascader = layui.cascader;


        var methods = {
            tableRender: function () {
                table.render({
                    id: 'tableElement'
                    , elem: '#tableElement'
                    , url: '/catalog/api/product/supplier/findProductPage'
                    , toolbar: '#topBar'
                    , defaultToolbar: false
                    , cellMinWidth: 80
                    , where: tools.serialize()
                    , title: '用户数据表'
                    , cols: [[
                        {type: 'checkbox', title: "全选", fixed: 'left'},
                        {
                            field: 'masterImg', width: 120, title: '主图', templet: function (d) {
                            return '<img   tb-img style="cursor: zoom-in;height: 100%;"   src="' + tools.getImage(d.masterImg) + '">';
                        }
                        },
                        {
                            field: 'name1', width: 300, title: '商品名称',  templet: function (row) {
                            var html = "";
                            html += '<div class="product-info"><h4>' + row.name1 + '</h4>';
                            html += tools.format('<p>PC价:<font style="color:red">{0}</font>&nbsp;&nbsp;Mobile价:<font  style="color:red">{1}</font></p>', row.mallPcPrice, row.mallMobilePrice)
                            html += '<p>分类:' + (row.productCateName || "") + '</p></div>';
                            return html;

                        }
                        },
                        {field: 'productBrandName', width: 150, title: '品牌'},
                        {field: 'productCode', width: 150, title: 'SPU'},
                        {field: 'virtualSales', width: 100, sort: false, title: '虚拟销量'},
                        {field: 'actualSales', width: 100, sort: false, title: '实际销量'},
                        {field: 'productStock', width: 80, sort: false, title: '总库存'},
                        {
                            field: 'state', width: 80, title: '状态', templet: function (d) {
                            if (d.state == 6) {
                                return "上架";
                            } else {
                                return "";
                            }
                        }
                        },
                        {
                            field: 'name2', width: 250, title: '副标题', templet: function (row) {
                            return '<div class="product-info">' + row.name2 + '</div>'
                        }
                        },
                        {field: 'upTime', width: 170, title: '上架时间', sort: true},
                        {field: 'createTime', width: 170, title: '创建时间', sort: true},
                        {
                            field: '', width: 100, title: '积分商品', templet: function (row) {
                            return row.integralType == 1 ? '否' : "是";
                        }
                        }
                    ]]
                    , page: true,
                    done: function () {
                        /* 点击图片放大 */
                        $("[tb-img]").click(function () {
                            layer.photos({
                                photos: {data: [{src: tools.getImage($(this).attr('src'), 'l')}]},
                                shade: .1,
                                closeBtn: true
                            });
                        })

                    }
                });
            },
            doQuery: function (obj) {
                table.reload('tableElement', {
                    where: tools.serialize(), page: {
                        curr: 1
                    }
                });
            },
            initSearchForm: function () {
                //商品分类
                //1初始化分类
                tools.postJSON({
                    url: '/catalog/api/product/category/findCascade',
                    params: {operateType: 1}
                }).done(function (res) {
                    cascader.render({
                        elem: '#categoryId',
                        data: res.data,
                        changeOnSelect: true,
                        filterable: true,
                        onChange: function (path, obj) {
                            if (path && path.length == 3 && !obj.haveChildren) {
                                $("#cateid").val(obj.value);
                            } else {
                                $("#cateid").val("");
                            }
                        }
                    })
                })
            },
            doInfo: function (id) {
                admin.popupCenter({
                    offset: 'auto',
                    area: ['1000px', '95%'],
                    title: "商品详情",
                    content: "   ",
                    btn: '返回',
                    success: function (layero, index) {
                        var index = layer.load();
                        tools.request({
                            url: '/catalog/api/product/detail',
                            method: 'get',
                            params: {productId: id}
                        }).done(function (res) {
                            layer.close(index);
                            if (res.code == 0) {
                                $("#adminPopupC").html(laytpl($("#info-temp").html()).render(res.data));
                                form.render();
                            } else {
                                layer.msg(res.msg);
                            }
                        })
                    }
                })

            },
            toolbarEvent: function () {
                //头工具栏事件
                table.on('toolbar(tableElement)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    if (!checkStatus.data || checkStatus.data.length == 0) {
                        return false;
                    }
                    switch (obj.event) {
                        case 'info':
                            if (checkStatus.data.length > 1) {
                                layer.msg("请选择一项进行操作")
                                return false;
                            }
                            methods.doInfo(checkStatus.data[0].id);
                            break;
                    }

                });
            }
        }
        methods.tableRender();
        methods.toolbarEvent();
        tools.event(methods);
        methods.initSearchForm();
    })


</script>




